<template>
	<scroll-view scroll-y class="container">
		<!-- 	<view class="empty" v-if="show==false">
			<image
				src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309"
				mode="widthFix"
				style="width: 360rpx;"
			></image>
			<view class="empty-text">空空如也的购物</view>
			<view class="empty-button" @click="goshopping">去选购</view>
		</view> -->
		<view class="">
			<view class="content-wrap">
				<view class="content-item">
					<view class="goods" v-for="(item, index) in cartlist" :key="index">
						<label :class="{ act: item.checked }" @click="selected(item)">
							<!-- <checkbox class="selected" color="#555555" :checked="item.checked" /> -->
							<text class="iconfont icon-danxuan-weixuan"></text>
						</label>
						<view class="good">
							<view class="img-wrapper"><image :src="item.img" mode=""></image></view>
							<view class="good-content">
								<view class="good-title text-line">{{ item.name }}</view>
								<view class="spec">
									<view class="spec1">
										<text class="name ellipsis">{{ item.attr }}</text>
									</view>
								</view>
								<view class="good-desc">
									<view class="good-price">
										<text>￥</text>
										{{ item.price }}
									</view>
									<number-box
										:min="0"
										:value="item.num"
										:source="'cart'"
										:index="index"
										:max="cartlist.stock"
										:step="1"
										@change="numberChange($event, item._id)"
									></number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="total-wrap">
				<view class="total-left">
					<label :class="{ act: allchecked }" @click="allChecked()">
						<!-- <checkbox :checked="allchecked" /> -->
						<text class="iconfont icon-danxuan-weixuan"></text>
						<text class="">全选</text>
					</label>

					<view class="total-con">
						<view class="top-con">
							合计:
							<text class="symbol">￥</text>
							<text class="total">{{ total.toFixed(2) }}</text>
						</view>
					</view>
				</view>

				<view class="total-right" @click="buy()">购买</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog
				mode="base"
				:duration="2000"
				:before-close="true"
				@close="close"
				@confirm="confirm(tempdel)"
				title="提示"
				content="你确定要删除此商品吗"
			></uni-popup-dialog>
		</uni-popup>
	</scroll-view>
</template>

<script>
import { getCartList, changeCartNum, toggleCheckCart, removeCart, getCancelCart, getCheckCart } from '@/api/api.js';
import numberBox from '@/components/numberbox/numberbox.vue';
export default {
	components: {
		numberBox
	},
	data() {
		return {
			cartlist: [],
			// show: false, //空购物车
			allchecked: false, //是否全选
			total: 0, //总计
			tempdel: ''
		};
	},
	onShow() {
		this.getCartList();
	},

	methods: {
		open() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		confirm(cartId) {
			console.log(cartId);
			removeCart({
				_id: cartId
			}).then(res => {
				console.log(res);
				if (res.code == 1) {
					this.getCartList();
					this.getTotal();
				}
			});
			this.$refs.popup.close();
		},

		numberChange(e, cart_id) {
			let { index, value, type } = e;
			console.log(e);
			this.tempdel = cart_id;
			if (type == 'reduce' && value === 0) {
				// console.log(111);
				this.open();
			} else {
				changeCartNum({
					_id: cart_id,
					num: value
				}).then(res => {
					// this.$toast('修改成功')
					this.cartlist[index].num = value;
					// console.log(res);
				});
			}
		},
		getCartList() {
			let uid = uni.getStorageSync('uid');
			getCartList({
				uid
			}).then(res => {
				console.log(res.data);
				this.cartlist = res.data;
				this.selectgoods();
				this.getTotal();
			});
		},
		//单选
		selected(item) {
			toggleCheckCart({
				_id: item._id,
				checked: item.checked
			}).then(res => {
				console.log(res);
				if (res.code == 1) {
					item.checked = !item.checked;
					// console.log(item)
					this.selectgoods();
					this.getTotal();
				}
			});
		},
		//全选
		selectgoods() {
			this.allchecked = this.cartlist.every(v => {
				return v.checked;
			});
			// console.log(this.allchecked);
		},
		// 反选
		allChecked() {
			let {allchecked} = this;
			//如果是全部选中状态
			if (allchecked) {
				// let allcheckedId = this.cartlist.reduce((current,v)=>{
				// 	if(v.checked){
				// 		current.push(v._id)
				// 	}
				// 	return current
				// },[]);
				let allcheckedId = [];
				this.cartlist.forEach(v => {
					if (v.checked) {
						allcheckedId.push(v._id);
					}
				});
				//取消
				getCancelCart({
					_id: allcheckedId
				}).then(res => {
					// console.log(res);
					if (res.code == 1) {
						this.getCartList();
					}
				});
			} else {
				let allncheckedId = [];
				this.cartlist.forEach(v => {
					if (!v.checked) {
						allncheckedId.push(v._id);
					}
				});
				//全部选中
				getCheckCart({
					_id: allncheckedId
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.getCartList();
					}
				});
			}
		},
		// 总计
		getTotal() {
			let t = 0;
			this.cartlist.forEach(v => {
				if (v.checked) {
					t += v.num * v.price;
				}
			});
			this.total = t;
		},

		buy() {
			let arr = [];
			this.cartlist.forEach(v => {
				if (v.checked) {
					arr.push(v._id);
				}
			});
			// console.log(arr);
			if (arr.length === 0) {
				this.$toast('请勾选要购买的商品');
				return;
			}
			uni.navigateTo({
				url: '/pages/order/createOrder',
				success(res) {
					res.eventChannel.emit('sendCartId', { cart_id: arr, type: 'cart' });
				}
			});
		}
	}
};
</script>

<style lang="scss">
.empty {
	position: relative;
	top: 220rpx;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	&-text {
		color: #808080;
		margin-bottom: 50rpx;
	}
	&-button {
		width: 300rpx;
		height: 90rpx;
		color: orange;
		border: 1rpx solid orange;
		text-align: center;
		line-height: 90rpx;
		border-radius: 48rpx;
	}
}
page {
	width: 100%;
	height: calc(100% - 110upx);
	background: #f5f5f5;
	.container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		.header {
			position: relative;
			width: 100%;
			height: 360upx;
			background: #fc7827;
			background-size: cover;
			overflow: hidden;
			/*  #ifndef  APP-PLUS  */
			height: 280upx;
			background-size: 100% 100%;

			/*  #endif  */
			.title-contents {
				position: fixed;
				top: 0;
				width: 100%;
				height: calc(var(--status-bar-height) + 88upx);
				z-index: 100008;

				.top-view {
					width: 100%;
					height: var(--status-bar-height);
					background: #fc7827;
				}

				.titles {
					display: flex;
					flex-direction: row;
					height: 88upx;
					background: #fc7827;

					.titleLeftButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;

						image {
							width: 40upx;
							height: 40upx;
						}
					}

					.titleText {
						width: 574upx;
						line-height: 88upx;
						text-align: center;
						font-size: 36upx;
						color: #fff;
					}

					.titleRightButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;
						font-size: 32upx;
						color: #fff;
					}
				}
			}
		}

		.content-wrap {
			margin-top: 20upx;
			margin-left: 24upx;
			width: 702upx;
			//
			.content-item {
				margin-bottom: 20upx;
				border-radius: 20upx;
				background: #fff;
			}

			.goods {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20upx;

				&:last-child {
					margin-top: 0;
				}

				label {
					margin-left: 20upx;
					line-height: 214upx;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.good {
					display: flex;
					justify-content: space-between;
					width: 624upx;
					padding: 20upx 0 0;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;
					.img-wrapper {
						width: 180upx;
						height: 180upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.good-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 440upx;
						height: 180upx;
						padding: 0 20upx;
						box-sizing: border-box;

						.good-title {
							font-size: 28upx;
							color: #111;
						}

						.spec {
							display: flex;
							flex-direction: row;

							.spec1 {
								display: flex;
								flex-direction: row;
								align-items: center;
								padding: 0 16upx;
								box-sizing: border-box;
								width: 100%;
								height: 40upx;
								border-radius: 8upx;
								//

								.name {
									display: inline-block;
									// width: 85%;
									padding: 0 15upx;
									line-height: 40upx;
									font-size: 24upx;
									color: #666;
									background: #f6f6f6;
								}

								.iconfont {
									color: #999;
								}
							}
						}

						.good-desc {
							display: flex;
							justify-content: space-between;

							.good-price {
								line-height: 38upx;
								color: #fb5248;
								font-size: 30upx;
							}
						}
					}
				}
			}
		}

		.total-wrap {
			position: fixed;
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background: #fff;
			z-index: 9;
			/*  #ifndef  H5  */
			bottom: 0px;
			/*  #endif  */
			/*  #ifdef  H5  */
			bottom: 50px;
			/*  #endif  */

			.total-left {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-left: 20upx;
				width: 490upx;
				height: 100%;
				color: #333;
				box-sizing: border-box;

				label {
					font-size: 28upx;
					display: flex;
					align-items: center;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
						margin-right: 5px;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.total-con {
					display: flex;
					flex-direction: column;
					margin-right: 20upx;
					.top-con {
						display: flex;
						flex-direction: row;
						line-height: 100upx;
						font-size: 30upx;
						color: #333;
						.freight {
							margin-right: 16upx;
							font-size: 22upx;
							color: #999;
						}
						.symbol {
							font-size: 24upx;
							color: #fc511f;
						}

						.total {
							color: #fc511f;
						}
					}
					.bottom-con {
						display: flex;
						flex-direction: row;
						line-height: 36upx;
						font-size: 22upx;
						.discounts {
							color: #fb5248;
							margin-right: 16upx;
						}
						.detail {
							color: #666;
						}
						.iconfont {
							font-size: 14px;
						}
					}
				}
			}

			.total-right {
				width: 200upx;
				height: 80upx;
				line-height: 80upx;
				margin-top: 10upx;
				margin-right: 20upx;
				background: #fc511f;
				color: #fff;
				text-align: center;
				font-size: 28upx;
				border-radius: 40upx;
			}
		}
		.mask {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 10009;
		}
		.mask-content {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 510upx;
			background: #fff;
			z-index: 10009;
			.head {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 25upx;
				box-sizing: border-box;
				height: 110upx;
				.title {
					position: relative;
					padding-left: 20upx;
					box-sizing: border-box;
					line-height: 110upx;
					font-size: 32upx;
					color: #010101;
					font-weight: bold;
					&::before {
						position: absolute;
						left: 0;
						top: 40upx;
						content: ' ';
						width: 6upx;
						height: 30upx;
						background: blue;
					}
					text {
						margin-left: 20upx;
						font-weight: normal;
						font-size: 24upx;
						color: #666;
					}
				}
				image {
					width: 30upx;
					height: 30upx;
				}
			}
			.holder {
				color: #999;
			}
			.list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				width: 700upx;
				height: 70upx;
				// border-bottom: 1px solid #eee;
				text {
					font-size: 28upx;
					color: blue;
					text {
						margin-left: 20upx;
						font-size: 24upx;
						color: #666;
					}
				}
			}
			.footer {
				position: absolute;
				bottom: 0;
				width: 100%;
				line-height: 94upx;
				color: blue;
				background: blue;
				text-align: center;
				font-size: 34upx;
			}
		}
	}
}
</style>
